<template>
  <div class="scores-container">
    <!-- 表格 -->
    <el-table :data="scores.records" style="width: 100%" border>
      <el-table-column prop="courseName" label="课程名称" width="300" />
      <el-table-column prop="name" label="学生姓名" width="300" />
      <el-table-column label="学习进度" width="550">
        <template slot-scope="scope">
          <!-- 进度条显示 -->
          <el-progress
              :percentage="scope.row.progress"
              :text-inside="true"
              :stroke-width="18"
              :color="getProgressColor(scope.row.progress)"
          >
            <template slot="text">{{ scope.row.progress }}%</template>
          </el-progress>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalRecords"
          layout="total, prev, pager, next, jumper"
          class="pagination"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scores: { records: [] }, // 分页数据
      currentPage: 1, // 当前页
      pageSize: 5, // 每页条数
      totalRecords: 0, // 总记录数
    };
  },
  created() {
    this.fetchScores();
  },
  methods: {
    // 获取分页数据
    async fetchScores() {
      try {
        const response = await this.$axios.get('studentScore/all', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize
          }
        });
        this.scores = response.data;
        this.totalRecords = response.data.total;
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },
    // 处理分页改变
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchScores(); // 根据页码重新获取数据
    },

    // 根据学习进度动态设置进度条颜色
    getProgressColor(progress) {
      if (progress <= 30) {
        return '#f56c6c'; // 红色 (表示低进度)
      } else if (progress <= 70) {
        return '#e6a23c'; // 黄色 (表示中等进度)
      } else {
        return '#409EFF'; // 蓝色 (表示高进度)
      }
    }
  }
};
</script>

<style scoped>
.scores-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.el-table {
  background-color: #fff;
  border-radius: 8px;
}

.el-table th,
.el-table td {
  text-align: center;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.pagination {
  display: inline-block;
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
}

.el-pagination .el-pager li {
  font-size: 14px;
}

.el-pagination .el-pagination__total {
  font-size: 14px;
  color: #888;
}

.el-pagination .el-pagination__jump input {
  font-size: 14px;
  height: 30px;
  width: 50px;
}

.el-pagination .el-icon-arrow-left,
.el-pagination .el-icon-arrow-right {
  font-size: 18px;
}

.el-table-column .cell {
  padding: 10px;
}

.el-progress {
  margin: 0 auto;
}
</style>
